<template>
  <el-dialog title="组员信息绑定账号" :visible.sync="dialog_visible">
    <el-alert title="" type="warning" style="margin-bottom: 50px" show-icon>
      <template>
        <p>
          只有主管和组长可以绑定登录账号，在绑定登录账号之前，先检查登录账号有没有存在，
          如何不存在，绑定无效。
        </p>
        <p>当【绑定账号】为空时，则就是解绑登录账号</p>
      </template>
    </el-alert>
    <div class="form-padding">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        auto-complete="on"
        label-width="90px"
        style="width: 100%"
      >
        <el-form-item label="姓名" prop="name">
          <el-input disabled placeholder="请输入姓名" v-model="temp.name" />
        </el-form-item>
        <el-form-item label="绑定账号" prop="bind_account">
          <el-input placeholder="" v-model="temp.bind_account" />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { bindAccount } from "@/api/org_team_members";
export default {
  name: "team_membersBind",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      temp: {
        id: "",
        name: "",
        bind_account: "",
      },
      rules: {},
    };
  },
  computed: {
    dialog_visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        this.temp = Object.assign({}, this.data);
      },
      deep: true,
    },
  },
  created() {
    this.initCtl();
  },
  methods: {
    initCtl() {
      this.temp = Object.assign(
        {},
        {
          id: "",
          name: "",
          bind_account: "",
        }
      );
    },
    cancel() {
      this.dialog_visible = false;
    },
    submit() {
      console.log(this.temp);
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          const param = {
            id: this.temp.id,
            bind_account: this.temp.bind_account,
          };
          bindAccount(param).then((response) => {
            if (response.data > 0) {
              setTimeout(() => {
                this.dialog_visible = false;
                this.$message({
                  type: "success",
                  message: "组员与登录账号绑定成功!",
                });
                this.$emit("success", param);
              }, 200);
            } else {
              this.$message({
                type: "info",
                message: "组员与登录账号绑定失败",
              });
            }
          });
        }
      });
    },
  },
};
</script>